Skip to content

Fix listbox closing immediately after opening on touch devices #3755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 6 commits into from
Jul 23, 2025
Merged

Fix listbox closing immediately after opening on touch devices #3755

merged 6 commits into from
Jul 23, 2025
+118 −2

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Jul 4, 2025 •
edited
Loading

Fixes #3750

@RobinMalfait is this the right approach?

  • probably need to write a test for this somehow? I feel like a playwright-style browser test might really be the only way to actually write this one.

@vercel Vercel
Copy link

vercel bot commented Jul 4, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 23, 2025 11:20am
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 23, 2025 11:20am

@RobinMalfait
fallback to pointerType of 'mouse'
60566bf 
JSDOM Doesn't support PointerEvent yet, so let's add this to the
polyfills.
@RobinMalfait
use MouseButton constants
17d31cf
@RobinMalfait
pointerType doesn't exist on the click event
f081f46
@RobinMalfait
improve click/touch handling
f69a0fd 
Rely on:

- `PointerDown` in case `pointerType === 'mouse'`
- `Click` in case `pointerType !== 'mouse'`

This makes the tests pass, and also makes sure that clicking on the
ListboxButton while the Listbox is open doesn't close and auto opens
again but stays closed.
@RobinMalfait
Copy link
Member

RobinMalfait commented Jul 23, 2025 •
edited
Loading

Couldn't reproduce this on a physical Android device in Chrome, but could reproduce it via the Chrome Devtools. Made some adjustments by essentially copying the full handlePointerDown implementation in the handleClick logic. Then made sure to capture the pointerType to ensure we rely on the pointerdown event for mouse types and click for touch and pen types.

Re-using the logic was necessary to prevent a bug where clicking the ListboxButton in an open Listbox closed the Listbox and immediately re-opened it.

My initial thinking was to use the event.currentTarget.setPointerCapture to ensure all pointer events were redirected to the ListboxButton and not any of the ListboxOption elements. But that didn't work because the click event was still fired on the ListboxOption itself.

trim.C7EAA7D7-87E1-4BB6-A522-106C1613A364.MOV

Re tests: I'm not sure how realistic it is to introduce these browser tests in this PR. I did manually test on Chrome and Safari (in normal mode, where pointerType is set to mouse), via Chrome Devtools to mimic the touch type, on Chrome for Android where I couldn't reproduce this issue initially but these changes also didn't break anything. Last but not least, I also tested on an iPad with a pencil where the pointerType was set to pen.

@RobinMalfait RobinMalfait marked this pull request as ready for review July 23, 2025 11:11
@RobinMalfait RobinMalfait merged commit 3b7c0b6 into main Jul 23, 2025
8 checks passed
@RobinMalfait RobinMalfait deleted the fix/issue-3750 branch July 23, 2025 11:20
This was referenced Jul 23, 2025
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@RobinMalfait RobinMalfait RobinMalfait approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Cannot Open Listbox in Mobile Chrome (Android)
2 participants
@thecrypticace @RobinMalfait